<template>
  <div class="I-III-II">
    <table class="I-III-II__table">
      <tr class="I-III-II__table-trone">
        <td class="I-III-II__table-trone-td"
            colspan="5">
          <div class="I-III-II__table-trone-td-title">
            I-3-2国家级一流课程
            <span class="I-III-II__table-trone-td-title-tips">
              （科研院所不填写本表）
            </span>
          </div>
        </td>
      </tr>
      <tr class="I-III-II__table-th">
        <td class="I-III-II__table-th-tdone">
          序号
        </td>
        <td class="I-III-II__table-th-tdtwo">
          课程类别
        </td>
        <td class="I-III-II__table-th-tdthree">
          课程名称
        </td>
        <td class="I-III-II__table-th-tdfour">
          负责人
        </td>
        <td class="I-III-II__table-th-tdfive">
          批准年度
        </td>
        <el-button type="success"
                   size="small"
                   icon="el-icon-plus"
                   class="I-III-II__table-th-add-button"
                   circle
                   @click.prevent="addCourseList"/>
      </tr>
      <tr v-for="(item, index) in acbs"
          :key="index"
          class="I-III-II__table-tr">
        <td class="I-III-II__table-tr-tdone">
          {{ index + 1 }}
        </td>
        <td class="I-III-II__table-tr-tdtwo">
          <el-select v-model="item.courseCategory"
                     class="I-III-II__table-tr-tdtwo-select"
                     placeholder="请选择">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"/>
          </el-select>
        </td>
        <td class="I-III-II__table-tr-tdthree">
          <el-input v-model="item.courseName"
                    type="textarea"
                    autosize
                    placeholder="填写课程名称"
                    :maxlength="30"/>
        </td>
        <td class="I-III-II__table-tr-tdfour">
          <el-input v-model="item.lead"
                    type="textarea"
                    autosize
                    placeholder="张三"
                    :maxlength="20"/>
        </td>
        <td class="I-III-II__table-tr-tdfive">
          <el-input v-model="item.approvalYear"
                    type="textarea"
                    autosize
                    placeholder="2021"
                    :maxlength="4"/>
        </td>
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   class="I-III-II__table-tr-delete-button"
                   circle
                   @click.prevent="deleteCourseItem(index)"/>
      </tr>
    </table>
    <div class="I-III-II__explain">
      <span class="I-III-II__explain-strong">
        说明：①
      </span>
      本表限填评估期内教育部评选的“国家级线上一流课程（原国家精品在线开放课程）、国家级线下一流课程、国家级线上线下混合式一流课程、国家虚拟仿真实验教学一流课程（原国家虚拟仿真实验教学项目）、国家级社会实践一流课程”（均不包括省级一流课程）。
      <span class="I-III-II__explain-strong">
        ②
      </span>
      国家级一流课程仅限“主要建设单位”填写。
    </div>
  </div>
</template>

<script>
import { getPageData } from '@/utils/getData.js'

export default {
  watch: {
    acbs: {
      handler (newVal) {
        sessionStorage['this_data'] = JSON.stringify(newVal)
      },
      deep: true,
      immediate: true
    }
  },
  async mounted () {
    const loading = this.$loading({ lock: true, text: '数据获取中...请稍后！', background: 'rgba(0, 0, 0, 0.7)' })
    this.acbs = await getPageData('acbs')
    loading.close()
  },
  data () {
    return {
      options: [
        { value: '0', label: '国家级线上一流课程' },
        { value: '1', label: '国家级线下一流课程' },
        { value: '2', label: '国家级线上线下混合式一流课程' },
        { value: '3', label: '国家虚拟仿真实验教学一流课程' },
        { value: '4', label: '国家级社会实践一流课程' }],
      acbs: []
    }
  },
  methods: {
    addCourseList () {
      this.acbs.push({ courseName: '', courseCategory: '', lead: '', approvalYear: '' })
    },
    deleteCourseItem (index) {
      this.acbs.splice(index, 1)
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/css/page/1-3-2.less';
</style>
